import Vue from "vue";
import VueRouter from "vue-router";


Vue.use(VueRouter);

const routes = [{
  path: "/",
  name: "home",
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import( /* webpackChunkName: "about" */ "../views/HomeView.vue"), //路由懒加载
  redirect: "/discover",
  children: [{
    path: "my",
    name: "my",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import( /* webpackChunkName: "about" */ "../views/MyView.vue"), //路由懒加载
  },
  {
    path: "discover",
    name: "discover",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import( /* webpackChunkName: "about" */ "../views/DiscoverView.vue"), //路由懒加载
  },
  ]
},
{
  path: "/songList/:id",
  name: "song-list",
  component: () =>
    import( /* webpackChunkName: "about" */ "../views/SongListView.vue"), //路由懒加载
  props($route) {
    return {
      id: Number($route.params.id) || 0
    }
  }
},
{
  path: "/play",
  name: "play",
  component: () =>
    import( /* webpackChunkName: "about" */ "../views/PlayView.vue"), //路由懒加载
  // props($route) {
  //   return {
  //     id: Number($route.params.id) || 0
  //   }
  // }
},
{
  path: "/search",
  name: "search",
  component: () =>
    import( /* webpackChunkName: "about" */ "../views/Search.vue"), //路由懒加载
},
{
  path: "/sr",
  name: "sr",
  component: () =>
    import( /* webpackChunkName: "about" */ "../views/SearchResult.vue"), //路由懒加载
},
{
  path: "/track/:id",
  name: "track",
  component: () =>
    import( /* webpackChunkName: "about" */ "../views/Track.vue"), //路由懒加载
  props($route) {
    return {
      id: Number($route.params.id) || 0
    }
  }
},
{
  path: "/recent",
  name: "recent",
  component: () =>
    import('../components/recent/index.vue'),
  props($route) {
    return {
      token: $route.params.token
    }
  }
},
{
  path: "/playVideo",
  name: "playVideo",
  component: () =>
    import('../components/recent/playVideo.vue'),
  props($route) {
    return {
      id: Number($route.params.id)
    }
  }
}
];

const router = new VueRouter({
  routes,
});

export default router;
